<template>
  <div style="height: 720px; background-color: aliceblue; padding: 12px">
    <div class="header">
      <span style="width: 60px; text-align: right">关键字</span>
      <el-input placeholder="请输入关键字" v-model="cmpReq.keyword" style="width: 200px; margin-left: 10px"></el-input>
      <el-button type="text" style="margin-left: 34px" size="small" @click="getDepartmentCompanies()">
        搜索
      </el-button>
      <el-link type="primary" style="margin-left: auto;" @click="cmpVis = true">已选公司>></el-link>
    </div>
    <el-row style="height: 620px">
      <el-col :span="12">
        <div v-for="cmp in cmpList.list1" :key="cmp.CMP_ID" style="margin:5px;">
          <el-checkbox :value="curCmpIds.findIndex((x) => x == cmp.CMP_ID) != -1"
            @change="(ischecked) => { cmpChoose(cmp, ischecked) }">{{ cmp.CMP_ShortName ? cmp.CMP_ShortName :
              cmp.CMP_Name
            }}</el-checkbox>
        </div>
      </el-col>
      <el-col :span="12">
        <div v-for="cmp in cmpList.list2" :key="cmp.CMP_ID" style="margin:5px;">
          <el-checkbox :value="curCmpIds.findIndex((x) => x == cmp.CMP_ID) != -1"
            @change="(ischecked) => { cmpChoose(cmp, ischecked) }">{{ cmp.CMP_ShortName ? cmp.CMP_ShortName :
              cmp.CMP_Name
            }}</el-checkbox>
        </div>
      </el-col>
    </el-row>
    <div style="width: 100%; height: 40px">
      <el-pagination layout="total,prev,pager,next" background small :current-page.sync="cmpReq.pageIndex"
        style="float: left;" :total="cmpRes.Total" :page-size="cmpReq.pageSize"
        @current-change="getDepartmentCompanies()">
      </el-pagination>

      <el-button round type="primary" style="width: 100px; height: 50px;float: right;" @click="sure">
        确定
      </el-button>
    </div>

    <el-dialog :visible.sync="cmpVis" title="已选公司" :append-to-body="true" width="800px">
      <el-table style="overflow: auto" height="600px" :data="curCmps" stripe border highlight-current-row>
        <el-table-column type="index" width="50"></el-table-column>
        <!-- <el-table-column prop="CMP_ID" label="ID" width="60px"></el-table-column> -->
        <el-table-column prop="CMP_Name" label="公司"></el-table-column>
        <el-table-column prop="CMP_ShortName" label="简称" width="230px"></el-table-column>
        <el-table-column prop="RL_Name" label="操作" width="60px">
          <template slot-scope="scope">
            <el-button type="text" @click="cmpChoose(scope.row, false)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import {
  getDepartmentCompanies
} from '@/api/flowCenter/organiztion/departmentCmpEmpManage'
export default {
  props: ['cmps', 'dpmId'],
  computed: {
    curCmpIds() {
      return this.cmps.map(x => x.CMP_ID)
    },
    cmpList() {
      let list2 = this.cmpRes.Items.splice(25)
      return { list1: this.cmpRes.Items, list2 }
    }
  },
  watch: {
    cmps: function () {
      this.curCmps = this.cmps
    },
    dpmId: function () {
      this.getDepartmentCompanies()
    },
  },
  data: function () {
    return {
      req: null,
      cmpReq: {
        dpmId: null,
        pageIndex: 1,
        pageSize: 50,
        keyword: null,
      },
      cmpRes: {
        Items: [],
        Total: 0,
      },
      curCmps: [],
      cmpVis: false
    }
  },
  methods: {
    cmpChoose(cmp, ischecked) {
      if (ischecked) {
        this.curCmps.push(cmp)
      } else {
        var index = this.curCmpIds.findIndex((x) => x == cmp.CMP_ID)
        this.curCmps.splice(index, 1)
        this.$forceUpdate()
      }
    },
    getDepartmentCompanies() {
      this.cmpReq.dpmId = this.dpmId
      getDepartmentCompanies(this.cmpReq).then(({ data }) => {
        this.cmpRes = data
      })
    },
    sure() {
      this.$emit('sure', this.curCmpIds)
    },
  },
  created: function () {
    this.curCmps = this.cmps
    this.getDepartmentCompanies()
  },
}
</script>

<style scoped>
.header {
  width: 100%;
  height: auto;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 5px;
  align-items: center;
}
</style>